<template>
	<div class="app">
		<app-header />
		<div class="content">
			<!-- 左侧操作区域 -->
			<div class="leftpane">
				<!-- 筛选部分 -->
				<section class="filter-section">
					<filter-tabs :value="activeTab" @change="onChangeTab" />
					<div class="filter-actions">
						<button class="btn action-primary" @click="onZoomToEvents">Zoom to Events</button>
						<button class="btn action-secondary" @click="onResetView">Reset View</button>
					</div>
					<ul class="legend">
						<li>
							<span class="dot past"></span>
							<span class="label">Past event</span>
						</li>
						<li>
							<span class="dot upcoming"></span>
							<span class="label">Upcoming event</span>
						</li>
					</ul>
				</section>

				<!-- 数据部分（暂存） -->
				<events-list :events="filteredEvents" @focus-event="focusEvent" />

				<!-- 操作部分（暂存） -->
				<embed-panel />
				<my-location-panel
					:my-location="myLocation"
					:upcoming-events="upcomingEvents"
					@pick="togglePickOnMap"
					@clear="clearMyLocation"
				/>
			</div>

			<!-- 右侧地图区域 -->
			<div class="rightpane">
				<map-view
					:events="filteredEvents"
					:pick-mode="pickMode"
					:my-location="myLocation"
					@picked-location="onPickedLocation"
					@open-event="onOpenEvent"
					ref="mapView"
				/>
			</div>
		</div>
		<event-popup
			v-if="activeEvent"
			:event="activeEvent"
			@close="activeEvent = null"
		/>
		<toast v-if="toastMessage" :message="toastMessage" @done="toastMessage = ''" />
	</div>
</template>

<script>
import 'leaflet/dist/leaflet.css'
import AppHeader from './components/AppHeader.vue'
import FilterTabs from './components/FilterTabs.vue'
import MapView from './components/MapView.vue'
import EmbedPanel from './components/EmbedPanel.vue'
import EventsList from './components/EventsList.vue'
import MyLocationPanel from './components/MyLocationPanel.vue'
import EventPopup from './components/EventPopup.vue'
import Toast from './components/Toast.vue'
import eventsData from './data/events.json'

export default {
	name: 'App',
	components: { AppHeader, FilterTabs, MapView, EmbedPanel, EventsList, MyLocationPanel, EventPopup, Toast },
	data() {
		return {
			activeTab: 'all',
			pickMode: false,
			myLocation: null,
			activeEvent: null,
			toastMessage: ''
		}
	},
	computed: {
		allEvents() { return eventsData },
		filteredEvents() {
			if (this.activeTab === 'all') return this.allEvents
			if (this.activeTab === 'past') return this.allEvents.filter(e => e.status === 'past')
			if (this.activeTab === 'upcoming') return this.allEvents.filter(e => e.status === 'upcoming')
			return this.allEvents
		},
		upcomingEvents() { return this.allEvents.filter(e => e.status === 'upcoming') }
	},
	methods: {
		onChangeTab(val) { this.activeTab = val },
		onZoomToEvents() { this.$refs.mapView && this.$refs.mapView.zoomToEvents() },
		onResetView() { this.$refs.mapView && this.$refs.mapView.resetView() },
		togglePickOnMap() { this.pickMode ? this.clearMyLocation() : this.pickMode = true },
		onPickedLocation(latLng) { this.myLocation = latLng; this.pickMode = false },
		onOpenEvent(event) { this.activeEvent = event },
		focusEvent(ev) { this.$refs.mapView && this.$refs.mapView.focusEvent(ev) },
		clearMyLocation() { this.myLocation = null; this.pickMode = false },
		showToast(msg) { this.toastMessage = msg }
	}
}
</script>

<style scoped>
.app { display: flex; flex-direction: column; height: 100vh; }
.spacer { flex: 1; }
.btn { padding: 8px 12px; border: 1px solid #e6e6e6; background: #fff; border-radius: 8px; cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease; }
.btn:hover { background: #f7f7f7; }
.action-primary { background: #2f2212; color: #fff; border-color: #2f2212; }
.action-primary:hover { background: #261b0e; }
.action-secondary { background: #f7f2ea; color: #5f503d; border-color: #eadcc7; }
.action-secondary:hover { background: #efe7da; border-color: #e2cfb1; }
.content { display: grid; grid-template-columns: 360px 1fr; gap: 0; flex: 1; min-height: 0; }
.leftpane { display: flex; flex-direction: column; overflow: auto; border-right: 1px solid #eee; background: #fff; }
.filter-section { padding: 10px 12px; border-bottom: 1px solid #eee; position: sticky; top: 0; background: #fff; z-index: 5; }
.filter-actions { display: flex; gap: 8px; margin-top: 8px; }
.legend { display: flex; gap: 18px; list-style: none; padding: 8px 0 0; margin: 0; align-items: center; }
.legend li { display: flex; align-items: center; gap: 6px; color: #666; font-size: 12px; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; border: 1px solid #fff; box-shadow: 0 0 0 1px #ddd inset; }
.dot.past { background: #9E9E9E; }
.dot.upcoming { background: #1976D2; }
.rightpane { min-width: 0; }
</style> 